<template>
  <div class="moduleedit">
    <el-form ref="form" :model="pageObj" label-width="110px" size="small">
      <el-form-item label="网站标题">
        <el-input @input="updateInput($event, 'title')" :value="pageObj.title" placeholder="请输入网站标题"> </el-input>
      </el-form-item>
      <!-- <el-form-item label="网站简介">
        <el-input type="textarea" :value="pageObj.introduction" @input="updateInput($event, 'introduction')" placeholder="请输入网站简介"></el-input>
      </el-form-item>

      <el-form-item label="LOGO">
        <uploadpic
          :piclink="pageObj.logo"
          :width="100"
          :real_width="50"
          :is_more="false"
          @send_pic="onSuccess_logo"
        >
        </uploadpic>
      </el-form-item> -->

      <el-form-item label="头部背景图" v-if="$route.query.id != 5">
        <uploadpic :piclink="pageObj.background || ''" width="300" :real_width="640" :real_height="344" :is_more="false" @send_pic="loadSuccess_bj"> </uploadpic>
      </el-form-item>

      <el-form-item label="是否显示客服" v-if="$route.query.id == 5">
        <el-switch
          class="zdySwith"
          :width="80"
          :value="pageObj.is_search"
          active-color="#13ce66"
          @change="updateInput($event, 'is_search')"
          inactive-color="#ffffff"
          active-text="显示"
          inactive-text="隐藏"
          active-value="1"
          inactive-value="0"
        ></el-switch>
      </el-form-item>

      <el-form-item label="是否显示搜索" v-else>
        <el-switch
          class="zdySwith"
          :width="80"
          :value="pageObj.is_search"
          active-color="#13ce66"
          @change="updateInput($event, 'is_search')"
          inactive-color="#ffffff"
          active-text="显示"
          inactive-text="隐藏"
          active-value="1"
          inactive-value="0"
        ></el-switch>
      </el-form-item>

      <el-form-item label="是否显示热搜" v-if="$route.query.id != 5">
        <el-switch
          class="zdySwith"
          :width="80"
          :value="pageObj.is_show_cate"
          active-color="#13ce66"
          @change="updateInput($event, 'is_show_cate')"
          inactive-color="#ffffff"
          active-text="显示"
          inactive-text="隐藏"
          active-value="1"
          inactive-value="0"
        ></el-switch>
      </el-form-item>

      <el-form-item label="搜索跳转链接" v-if="$route.query.id != 5">
        <el-col :span="16">
          <el-input @input="updateInput($event, 'search')" :value="pageObj.search" placeholder="请输入搜索跳转链接"> </el-input>
        </el-col>
        <el-col :span="6" class="mar_lf_15">
          <LinkMenu @sendRow="getsearchlink($event)" :index="0"></LinkMenu>
        </el-col>
      </el-form-item>

      <!-- <el-form-item label="是否显示定位">
        <el-switch
          class="zdySwith"
          :width="82"
          :value="pageObj.tuanzhang"
          active-color="#13ce66"
          @change="updateInput($event, 'tuanzhang')"
          inactive-color="#ffffff"
          active-text="显示"
          inactive-text="隐藏"
          active-value="1"
          inactive-value="0"
        ></el-switch>
      </el-form-item> -->

      <template v-if="$route.query.id != 5">
        <el-divider></el-divider>
        <el-form-item label="导航样式" v-if="headericon">
          <el-select :value="headericon.style" placeholder="请选择个数" @change="changeMenu">
            <el-option label="图标两侧" value="0"></el-option>
            <el-option label="图标居左" value="1"></el-option>
            <el-option label="图标居右" value="2"></el-option>
            <el-option label="定位搜索" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="左侧图标">
          <div class="index_img_nav img_nav containerImgs">
            <van-icon :name="leftIcon.piclink" size=" 90px"></van-icon>
            <span class="imgnav-reselect">
              <my-upload url="/api/common/upload/index/" :onload="befau" :on-success="uploadSuccessleft" />
            </span>
            <i @click="delIcon(1)" v-show="leftIcon.piclink" class="el-icon-delete deleBtm"></i>
          </div>
        </el-form-item>
        <!-- <el-form-item label="图标选择">
          <el-col :span="24">
            <el-select
              :value="leftIcon.piclink"
              @change="setIcon($event, 0, 'piclink')"
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="item in icon"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">
                  <van-icon :name="item.value"></van-icon>
                </span>
              </el-option>
            </el-select>
          </el-col>
        </el-form-item> -->
        <el-form-item label="标题名称">
          <el-col :span="24">
            <el-input :value="leftIcon.title" @input="setIcon($event, 0, 'title')"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="链接到">
          <el-col :span="16">
            <el-input :value="leftIcon.links" @input="setIcon($event, 0, 'links')" class="mar-input"></el-input>
            <el-input :value="leftIcon.introduction" @input="setIcon($event, 0, 'introduction')"></el-input>
          </el-col>
          <el-col :span="6" class="mar_lf_15">
            <LinkMenu @sendRow="getSendRow($event)" :index="0"></LinkMenu>
          </el-col>
        </el-form-item>

        <el-divider></el-divider>

        <el-form-item label="右侧图标">
          <div class="index_img_nav img_nav containerImgs">
            <van-icon :name="rightIcon.piclink" size=" 90px"></van-icon>
            <span class="imgnav-reselect">
              <my-upload url="/api/common/upload/index/" :onload="befau" :on-success="uploadSuccessright" />
            </span>
            <i @click="delIcon(2)" v-show="rightIcon.piclink" class="el-icon-delete deleBtm"></i>
          </div>
        </el-form-item>
        <!-- <el-form-item label="图标选择">
          <el-col :span="24">
            <el-select
              :value="rightIcon.piclink"
              @change="setIcon($event, 1, 'piclink')"
              placeholder="请选择"
            >
              <el-option
                v-for="item in icon"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">
                  <van-icon :name="item.value"></van-icon>
                </span>
              </el-option>
            </el-select>
          </el-col>
        </el-form-item> -->
        <el-form-item label="标题名称">
          <el-col :span="24">
            <el-input :value="rightIcon.title" @input="setIcon($event, 1, 'title')"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="链接到">
          <el-col :span="16">
            <el-input :value="rightIcon.links" @input="setIcon($event, 1, 'links')" class="mar-input"></el-input>
            <el-input :value="rightIcon.introduction" @input="setIcon($event, 1, 'introduction')"></el-input>
          </el-col>
          <el-col :span="6" class="mar_lf_15">
            <LinkMenu @sendRow="getSendRow" :index="1"></LinkMenu>
          </el-col>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
import { mapState } from "vuex";
import uploadpic from "@/components/page/pic/up_pic";
import myUpload from "@/components/currency/MyUpload.vue";
import LinkMenu from "@/components/currency/Link_menu.vue";
export default {
  data() {
    return {
      activeNames: ["1"],

      icon: [
        { label: "like-o", value: "like-o" },
        { label: "star-o", value: "star-o" },
        { label: "phone-o", value: "phone-o" },
        { label: "setting-o", value: "setting-o" },
        { label: "fire-o", value: "fire-o" },
        { label: "coupon-o", value: "coupon-o" },
        { label: "cart-o", value: "cart-o" },
        { label: "shopping-cart-o", value: "shopping-cart-o" },
        { label: "cart-circle-o", value: "cart-circle-o" },
        { label: "friends-o", value: "friends-o" },
        { label: "comment-o", value: "comment-o" },
        { label: "gem-o", value: "gem-o" },
        { label: "gift-o", value: "gift-o" },
        { label: "point-gift-o", value: "point-gift-o" },
        { label: "send-gift-o", value: "send-gift-o" },
        { label: "service-o", value: "service-o" },
        { label: "bag-o", value: "bag-o" },
        { label: "todo-list-o", value: "todo-list-o" },
        { label: "balance-list-o", value: "balance-list-o" },
        { label: "medel-o", value: "medel-o" },
        { label: "close", value: "close" },
        { label: "clock-o", value: "clock-o" },
        { label: "question-o", value: "question-o" },
        { label: "passed", value: "passed" },
        { label: "add-o", value: "add-o" },
        { label: "gold-coin-o", value: "gold-coin-o" },
        { label: "info-o", value: "info-o" },
        { label: "manager-o", value: "manager-o" },
        { label: "label-o", value: "label-o" },
        { label: "hot-o", value: "hot-o" },
        { label: "hot-sale-o", value: "hot-sale-o" },
        { label: "new-o", value: "new-o" },
        { label: "new-arrival-o", value: "new-arrival-o" },
        { label: "goods-collect-o", value: "goods-collect-o" },
        { label: "eye-o", value: "eye-o" },
        { label: "browsing-history-o", value: "browsing-history-o" },
        { label: "bookmark-o", value: "bookmark-o" },
        { label: "bill-o", value: "bill-o" },
        { label: "video-o", value: "video-o" },
        { label: "shop-o", value: "shop-o" },
        { label: "shop-collect-o", value: "shop-collect-o" },
        { label: "chat-o", value: "chat-o" },
        { label: "smile-comment-o", value: "smile-comment-o" },
        { label: "vip-card-o", value: "vip-card-o" },
        { label: "award-o", value: "award-o" },
        { label: "diamond-o", value: "diamond-o" },
        { label: "volume-o", value: "volume-o" },
        { label: "cluster-o", value: "cluster-o" },
        { label: "underway-o", value: "underway-o" },
        { label: "photo-o", value: "photo-o" },
        { label: "gift-card-o", value: "gift-card-o" },
        { label: "more-o", value: "more-o" },
        { label: "expand-o", value: "expand-o" },
        { label: "play-circle-o", value: "play-circle-o" },
        { label: "pause-circle-o", value: "pause-circle-o" },
        { label: "stop-circle-o", value: "stop-circle-o" },
        { label: "warning-o", value: "warning-o" },
        { label: "phone-circle-o", value: "phone-circle-o" },
        { label: "smile-o", value: "smile-o" },
        { label: "music-o", value: "music-o" },
        { label: "balance-o", value: "balance-o" },
        { label: "refund-o", value: "refund-o" },
        { label: "birthday-cake-o", value: "birthday-cake-o" },
        { label: "user-o", value: "user-o" },
        { label: "thumb-circle-o", value: "thumb-circle-o" },
        { label: "orders-o", value: "orders-o" },
        { label: "tv-o", value: "tv-o" },
        { label: "envelop-o", value: "envelop-o" },
        { label: "flag-o", value: "flag-o" },
        { label: "flower-o", value: "flower-o" },
        { label: "filter-o", value: "filter-o" },
        { label: "bar-chart-o", value: "bar-chart-o" },
        { label: "chart-trending-o", value: "chart-trending-o" },
        { label: "comment-circle-o", value: "comment-circle-o" },
        { label: "brush-o", value: "brush-o" },
        { label: "bullhorn-o", value: "bullhorn-o" },
        { label: "hotel-o", value: "hotel-o" },
        { label: "cashier-o", value: "cashier-o" },
        { label: "newspaper-o", value: "newspaper-o" },
        { label: "warn-o", value: "warn-o" },
        { label: "notes-o", value: "notes-o" },
        { label: "calender-o", value: "calender-o" },
        { label: "bulb-o", value: "bulb-o" },
        { label: "user-circle-o", value: "user-circle-o" },
        { label: "desktop-o", value: "desktop-o" },
        { label: "apps-o", value: "apps-o" },
        { label: "home-o", value: "home-o" },
        { label: "share", value: "share" },
        { label: "search", value: "search" },
        { label: "points", value: "points" },
        { label: "edit", value: "edit" },
        { label: "delete", value: "delete" },
        { label: "qr", value: "qr" },
        { label: "qr-invalid", value: "qr-invalid" },
        { label: "closed-eye", value: "closed-eye" },
        { label: "wap-home", value: "wap-home" },
        { label: "scan", value: "scan" },
        { label: "free-postage", value: "free-postage" },
        { label: "certificate", value: "certificate" },
        { label: "logistics", value: "logistics" },
        { label: "contact", value: "contact" },
        { label: "cash-back-record", value: "cash-back-record" },
        { label: "after-sale", value: "after-sale" },
        { label: "exchange", value: "exchange" },
        { label: "upgrade", value: "upgrade" },
        { label: "ellipsis", value: "ellipsis" },
        { label: "circle", value: "circle" },
        { label: "description", value: "description" },
        { label: "records", value: "records" },
        { label: "sign", value: "sign" },
        { label: "completed", value: "completed" },
        { label: "failure", value: "failure" },
        { label: "ecard-pay", value: "ecard-pay" },
        { label: "peer-pay", value: "peer-pay" },
        { label: "balance-pay", value: "balance-pay" },
        { label: "credit-pay", value: "credit-pay" },
        { label: "debit-pay", value: "debit-pay" },
        { label: "cash-on-deliver", value: "cash-on-deliver" },
        { label: "other-pay", value: "other-pay" },
        { label: "tosend", value: "tosend" },
        { label: "pending-payment", value: "pending-payment" },
        { label: "paid", value: "paid" },
        { label: "aim", value: "aim" },
        { label: "discount", value: "discount" },
        { label: "idcard", value: "idcard" },
        { label: "replay", value: "replay" },
        { label: "shrink", value: "shrink" },
      ],
    };
  },
  computed: {
    ...mapState({
      pageObj: (state) => state.modulePage.moduledata,
      headericon: (state) => state.modulePage.data.headericon,
    }),
    leftIcon() {
      try {
        return this.headericon.banner[0];
      } catch {
        return {};
      }
    },
    rightIcon() {
      try {
        return this.headericon.banner[1];
      } catch {
        return {};
      }
    },
  },
  components: {
    uploadpic,
    myUpload,
    LinkMenu,
  },
  created() {
    // iconObj: {
    //   //首页左右图标
    //   types: "headericon",
    //   banner: [
    //     {
    //       title: "",
    //       links: "",
    //       text: "头部菜单左分类",
    //       show: "1",
    //       piclink: "send-gift-o",
    //     },
    //     {
    //       title: "",
    //       links: "",
    //       text: "头部菜单右分类",
    //       show: "1",
    //       piclink: "send-gift-o",
    //     },
    //   ],
    // },
    //index 0 左侧图标 1右侧图标
  },
  mounted() {},
  methods: {
    delIcon(type) {
      if (type == 1) {
        this.leftIcon.piclink = "";
      } else {
        this.rightIcon.piclink = "";
      }
    },
    changeMenu(e) {
      this.$store.commit("setModuleName", {
        key: "headericon",
        name: "style",
        val: e,
      });
    },
    befau() {},

    setIcon(val, index, name) {
      var obj = {
        val: val,
        index: index,
        name: name,
      };

      this.$store.commit("setheadericon", obj);
    },
    updateInput(e, type) {
      this.$store.commit("setbaseedit", { label: type, val: e });
    },

    onSuccess_logo(pic) {
      // 上传logo
      this.$store.commit("setbaseedit", { label: "logo", val: pic });
    },
    loadSuccess_bj(pic) {
      //上传背景图片
      this.$store.commit("setbaseedit", { label: "background", val: pic });
    },
    uploadSuccessright(response) {
      if (response.code == 200 && response.code_desc == "请求成功") {
        var obj = {
          val: response.result,
          index: 1,
          name: "piclink",
        };
        this.$store.commit("setheadericon", obj);
      } else if (response.code == 400) {
        this.$message.error("上传失败！不支持的类型");
      }
    },
    uploadSuccessleft(response) {
      if (response.code == 200 && response.code_desc == "请求成功") {
        var obj = {
          val: response.result,
          index: 0,
          name: "piclink",
        };
        this.$store.commit("setheadericon", obj);
      } else if (response.code == 400) {
        this.$message.error("上传失败！不支持的类型");
      }
    },
    getsearchlink(row) {
      this.$store.dispatch("getShopsAll", { page: 1, page_size: 10 });
      var result = this.$fnc.getSendRow(row);
      this.$store.commit("setbaseedit", { label: "search", val: result.links });
    },
    getSendRow(row) {
      this.$store.dispatch("getShopsAll", { page: 1, page_size: 10 });
      var result = this.$fnc.getSendRow(row);
      if (result.title == "自定义链接") {
        this.setIcon(result.desc, result.index, "introduction");
        this.setIcon(result.links, result.index, "links");
      } else {
        this.setIcon(result.desc, result.index, "introduction");
        this.setIcon(result.links, result.index, "links");
      }
    },
  },
};
</script>

<style scoped lang="less">
.mar_10 {
  margin-top: 10px;
}

.containerImgs {
  position: relative;
  .deleBtm {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 100;
    transform: scale(1.2);
  }
}
</style>
